<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片</title>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-pYt9Xj+1jIVz6g/KBGZfJ+5AH5sz5M/Q1y21pJyDST8lxzWj+wpqP5hUZmDl8mRd6Q+U6hJU6RL+iUmk8WpKqA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        #editor {
            height: 200px;
        }
        .note {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
        .export-image {
            background-color: white;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
    </style>
</head>
<body>

<div id="editor"></div>
<button id="save-btn">保存</button>
<div id="notes"></div>


<script>
    var quill = new Quill('#editor', {
        theme: 'snow'
    });

    document.getElementById('save-btn').addEventListener('click', function() {
    var delta = quill.getContents();
    var note = document.createElement('div');
    note.className = 'note';
    note.innerHTML = quill.root.innerHTML;

    var exportBtn = document.createElement('button');

    exportBtn.textContent = '导出图片';

    exportBtn.addEventListener('click', function() {
    var exportContainer = document.createElement('div');
    exportContainer.className = 'export-container';

    var exportImage = document.createElement('div');
    exportImage.className = 'export-image';
    exportImage.innerHTML = quill.root.innerHTML;
    exportContainer.appendChild(exportImage);

    

    const noteTime = new Date().toLocaleDateString().replace(/\//g, '-');
    var timeDisplay = document.createElement('div');
    timeDisplay.textContent = noteTime + ' @公众号 | 乔一门';
    timeDisplay.style.fontSize = '13px';
    timeDisplay.style.marginBottom = '4px';
    timeDisplay.style.color = 'gray';
    
    
    exportImage.insertBefore(timeDisplay, exportImage.firstChild);

    var hr = document.createElement('hr');
    hr.style.border = 'none';
    hr.style.borderTop = '0.5px solid #eeeeee';
    hr.style.margin = '14px 0px -1px 0px';
    exportImage.insertBefore(hr, timeDisplay.nextSibling);

    exportImage.style.border = '1px solid #dad9d9';
    exportImage.style.borderRadius = '25px';
    exportImage.style.padding = '20px';
    exportImage.style.background = 'white';

    exportContainer.style.padding = '15px 8px 12px 8px';// 距离外侧
    exportContainer.style.background = 'white';


    
    document.body.appendChild(exportContainer);

    html2canvas(exportContainer, {
        scale: 2 // 设置缩放比例，提高分辨率
    }).then(function(canvas) {
        var ctx = canvas.getContext('2d');
        ctx.font = '11px Arial';

        ctx.fillStyle = 'black';
        ctx.fillText(noteTime, 10, 20); // 绘制时间文本

        canvas.toBlob(function(blob) {
            var item = new ClipboardItem({ 'image/png': blob });
            navigator.clipboard.write([item]).then(function() {
                showToast('复制成功');
            }).catch(function(err) {
                console.error(err);
            });
            document.body.removeChild(exportContainer);
        });
    });
});







const noteTime = new Date().toLocaleDateString().replace(/\//g, '-');
    const timeDisplay = document.createElement('div');
    timeDisplay.textContent = noteTime;
    timeDisplay.style.fontSize = '12px';
    timeDisplay.style.marginBottom = '4px';
    note.insertBefore(timeDisplay, note.firstChild);

    note.appendChild(exportBtn);
    document.getElementById('notes').appendChild(note);
});


    function copyImageToClipboard(img) {
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        canvas.toBlob(function(blob) {
            var item = new ClipboardItem({ 'image/png': blob });
            navigator.clipboard.write([item]).then(function() {
                showToast('复制成功');
            }).catch(function(err) {
                console.error(err);
            });
        });
    }

    function showToast(message) {
        var toast = document.createElement('div');
        toast.style.position = 'fixed';
        toast.style.bottom = '20px';
        toast.style.left = '50%';
        toast.style.transform = 'translateX(-50%)';
        toast.style.background = 'rgba(0, 0, 0, 0.7)';
        toast.style.color = 'white';
        toast.style.padding = '10px';
        toast.style.borderRadius = '15px';
        toast.style.zIndex = '1000';
        toast.textContent = message;

        document.body.appendChild(toast);
        setTimeout(function() {
            toast.remove();
        }, 1000);
    }
</script>
</body>
</html>
